<template>
    <div class="verifyPage" >
        <div class="verify-container">
            <!-- <div class="inputBox">
                 <span>问题反馈</span>
                <input class="phoneNum verificationInput"  name="" id="" >
                <div class="codeInput">
                    <input class="verificationInput" type='text' name="" id="" placeholder="图片验证码" >
                    
                </div>
                <span class="errMsg" ></span>
                
            </div> -->
            <div class="proContent">
                <h3 style="text-align:center;color:#7B3D41">问题反馈</h3>
                <div class="inputContent">
                    <el-form action="" :model="form" ref="form">
                        <el-form-item label="" prop="contactWay" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>&nbsp;联系方式</span> </div>
                                <el-input type="text" name="worksName" v-model="form.contactWay" class="elInputCom" placeholder="手机号/QQ/微信"></el-input>
                            </div>
                        </el-form-item>

                        <el-form-item label="" prop="comment" class="worksItem" :rules="{validator:this.$common.emptyValidate, trigger: 'blur'}">
                            <div class="worksInput">
                                <div class="labelText"><i></i><span>&nbsp;问题描述</span> </div>
                                <el-input type="textarea" :rows="3" name="worksName" v-model="form.comment" class="common_textarea"  placeholder="输入问题描述"></el-input>
                            </div>
                        </el-form-item>
                        
                        <el-form-item label="" prop="images" class="worksItem" >
                            <div class="worksInput workImgDiv">
                                <div class="labelText"><i></i><span>&nbsp;问题图片</span></div> 
                                <div class="addImg2" >
                                    <el-upload
                                        action="string"
                                        :http-request="uploadImg"
                                        list-type="picture-card"
                                        accept="image/*"
                                        :limit="uploadLimit"
                                        :beforeUpload="beforeUpload"
                                        :on-remove="handleRemove"
                                        :on-preview="handlePictureCardPreview"
                                        >
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible" style="">
                                        <img :src="dialogImageUrl" alt="" style="width:100%;z-index:9999">
                                    </el-dialog>

                                </div>
                            </div>
                        </el-form-item>

                    </el-form>
                    
                </div>
                <div slot="footer" class="dialog-footer" style="text-align:center;">
                    <router-link to="/login">
                        <el-button class="elBtn" type="primary">返回</el-button>
                    </router-link> 
                    <el-button class="elBtn" type="primary" @click="savePro" style="margin-left:25px">确 定</el-button>
                </div> 
            </div>
             
        </div>

        <span class="backSpan" @click="backToIndex"><i class="el-icon-refresh-left"></i>返回首页</span>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    data(){
        return{
            disabled: false,
            dialogVisible:false,
            dialogImageUrl:"",
            limitNum:3,
            uploadLimit:1,
            imgUrl:[],
            form:{
                contactWay:"",
                comment:"",
                images:""
            },
        }
    },
    created(){
    },
    methods:{
        backToIndex(){
            this.$router.push('/index')
        },
        // 自定义上传方式
        uploadImg(param){
            let uploadData = new FormData();
            uploadData.append('file', param.file);
            
            this.$api.uploadImg(uploadData).then(result => {
                if(result.data.success){
                    this.imgUrl.push(result.data.data)
                }
                
            });
        },
        beforeUpload(file){
            this.uploadLimit += 1
            if(this.uploadLimit>4){
                this.$message({center: true,message: "只能上传3张图片!",type: 'warning'});
                return false;
            }
        },
       
        handleRemove(file,fileList){
            this.uploadLimit -=1
            // this.imgUrl.shift()
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        savePro(){
            this.$refs['form'].validate((valid) => {
                if(valid){
                   
                    this.form.images = this.imgUrl.join(",");
                    this.$api.insertProblem(this.form)
                    .then(result=>{
                        if(result.data.success){
                            this.$message({center: true,message:"问题反馈成功,返回登陆页面",type: 'success'});
                            this.$router.push('/login')
                        }else{
                            this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                        }
                        
                    })
                }
            })
            
        }
    }
}
</script>

<style lang="scss" scoped>
.verifyPage{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:url('../../../images/bg003.png');
    background-repeat: no-repeat;
    background-size:100% 100%;
    .verify-container{
        width:55%;
        height: 70%;
        margin-left:36%;
        margin-top:10%;
        .proContent .inputContent{
            width: 95%;
            margin: auto;
            .worksInput{
                display: flex;
                justify-content: space-between;
                align-items: center;
                .labelText{
                    display: flex;
                    align-items: center;
                    >i{
                        display: inline-block;
                        width:20px;
                        height: 20px;
                        background: url('../../../images/icon4.png') no-repeat;
                        background-size: 100% 100%;
                    }
                }
                .addImg2{
                    
                    width: 75%;
                    height: 105px;
                    >div{
                        display: flex;
                        // justify-content: space-between;
                        width:100%;
                        height: 100%;
                    }
                }
                
            }
            .common_textarea,.elInputCom{
                width: 75%;
            }
        }
    }
    .backSpan{
        position: absolute;
        right: 20px;
        bottom: 60px;
        font-size: 14px;
        color: #7B3D41;
        cursor: pointer;
    }
    
}
</style>